@import "../color-vars.scss";

$padding-top: 30px;

//底部对齐
$user-chart-height: calc((100% - 115px) / 3);
$event-height: 160px;
$chart-height: calc((100% - $event-height - $user-chart-height) / 2);
$right-width: 20%;
.event-chart {
	top: $padding-top;
	right: 30px;
	z-index: 9;
	box-sizing: border-box;
	width: $right-width;
	height: $event-height;
	.content {
		height: 100%;
		.empty {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 80%;
			font-size: 20px;
			color: #aaaaaa;
		}
	}
	.scrollBarBox {
		width: 100%;
		height: calc(100% - 30px);
		padding-top: 10px;
		font-size: 13px;
		.box {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
	}
	.list-row {
		align-items: center;
		height: 30px;
		padding-right: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
		.prefix {
			box-sizing: border-box;
			padding: 0 20px 0 10px;
		}
		.level-1 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 68px;
			height: 24px;
			font-size: 13px;
			color: #2ccf88;
			text-align: center;
			background: #2ccf8840;
			border-radius: 3px;
		}
		.level-2 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 68px;
			height: 24px;
			font-size: 13px;
			color: #c28515;
			text-align: center;
			background: #c2851540;
			border-radius: 3px;
		}
		.level-3 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 68px;
			height: 24px;
			font-size: 13px;
			color: #d13711;
			text-align: center;
			background: #d1371140;
			border-radius: 3px;
		}
		.event-content {
			width: 60%;
			overflow: hidden;
			font-weight: 500;
			text-align: left;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.operate {
			width: 70px;
			font-weight: 500;
			color: #67ffffff;
			text-align: center;
			text-align: right;
			cursor: pointer;
			&:hover {
				opacity: 0.8;
			}
		}
	}
	.list-row:hover {
		color: #0070cc;
		opacity: 0.7;
	}
	.list-row:nth-of-type(even) {
		background-color: $active-color;
	}
	.list-row.alarming {
		.operate {
			color: #777777;
		}
	}
}
.alarm-chart {
	top: $event-height;
	right: 30px;
	width: $right-width;
	height: $chart-height;
	padding: 30px 0 15px;
	.content {
		height: 100%;
		.chart {
			height: 100%;
		}
	}
}
.surviva-device-chart {
	top: calc($chart-height + $event-height);
	right: 30px;
	width: $right-width;
	height: $chart-height;
	padding: 15px 0;
	.content {
		height: 100%;
		.chart {
			height: 100%;
		}
	}
}
.surviva-user-chart {
	top: calc($chart-height * 2 + $event-height);
	right: 30px;
	width: $right-width;
	height: $user-chart-height;
	padding: 15px 0;
	.content {
		height: 100%;
		.chart {
			height: 100%;
		}
	}
}
